<template>
  <view class="simple-tab-nav">
    <view class="nav-container">
      <view
        v-for="(item, index) in navItems"
        :key="index"
        class="nav-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <view class="nav-icon">{{ item.icon }}</view>
        <view class="nav-text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface NavItem {
  text: string
  icon: string
  pagePath: string
}

const props = defineProps<{
  currentTab: number
}>()

const currentTab = ref(props.currentTab)

const navItems = ref<NavItem[]>([
  { text: '首页', icon: '🏠', pagePath: '/pages/index/index' },
  { text: '设备', icon: '🏢', pagePath: '/pages/devices/index' },
  { text: '工单', icon: '📝', pagePath: '/pages/work-orders/index' },
  { text: '告警', icon: '🔔', pagePath: '/pages/alerts/index' },
  { text: '我的', icon: '👤', pagePath: '/pages/profile/index' }
])

const switchTab = (index: number) => {
  if (index === currentTab.value) return

  currentTab.value = index
  const item = navItems.value[index]

  // Use reLaunch for main navigation to clear navigation stack
  uni.reLaunch({
    url: item.pagePath
  })
}

onMounted(() => {
  // 获取当前页面
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const currentRoute = '/' + currentPage.route

  // 找到对应的tab索引
  const index = navItems.value.findIndex(item => item.pagePath === currentRoute)
  if (index !== -1) {
    currentTab.value = index
  }
})
</script>

<style lang="scss" scoped>
.simple-tab-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1rpx solid #e8e8e8;
  z-index: 999;
  padding: 16rpx 0;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
  min-width: 120rpx;
  transition: all 0.3s ease;

  &.active {
    .nav-icon {
      transform: scale(1.1);
    }

    .nav-text {
      color: #52c41a;
      font-weight: 600;
    }
  }

  &:active {
    transform: scale(0.95);
  }
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
  line-height: 1;
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 24rpx;
  color: #7A7E83;
  line-height: 1;
  transition: all 0.3s ease;
}
</style>
<style lang="scss">
/* 全局样式，确保页面底部有足够的空间 */
page {
  padding-bottom: 120rpx;
}
</style>